<template>
  <div id="uesrtext">
    <div>
      <el-popover
        placement="top-start"
        width="400"
        trigger="click"
        class="emoBox"
      >
        <div class="emotionList">
          <a
            href="javascript:void(0);"
            @click="getEmo(index)"
            v-for="(item, index) in faceList"
            :key="index"
            class="emotionItem"
            >{{ item }}</a
          >
        </div>
        <el-button id="emojiBtn" class="emotionSelect" slot="reference">
          <i class="fa fa-smile-o" aria-hidden="true"></i>
        </el-button>
      </el-popover>
      <el-upload
        class="upload-btn"
        action="/file"
        :before-upload="beforeAvatarUpload"
        :on-success="imgSuccess"
        :on-error="imgError"
        :show-file-list="false"
        accept=".jpg,.jpeg,.png,.JPG,JPEG,.PNG,.gif,.GIF"
      >
        <el-button id="uploadImgBtn" icon="el-icon-picture-outline"></el-button>
      </el-upload>
      <el-upload
        class="upload-btn"
        action="/file"
        :before-upload="beforeFileUpload"
        :on-success="fileSuccess"
        :on-error="fileError"
        :show-file-list="false"
      >
        <el-button id="uploadImgBtn" icon="el-icon-folder-opened"></el-button>
      </el-upload>
    </div>
    <textarea
      id="textarea"
      placeholder="按 Ctrl + Enter 发送"
      v-model="content"
      v-on:keyup="addMessage"
    >
    </textarea>
    <el-button
      id="sendBtn"
      type="primary"
      size="mini"
      @click="addMessageByClick"
      >发送(S)</el-button
    >
  </div>
</template>

<script>
import { mapState } from "vuex";
const appData = require("../../utils/emoji.json"); //引入存放emoji表情的json文件

export default {
  name: "uesrtext",
  data() {
    return {
      faceList: [], //表情包数据
      content: ""
    };
  },
  mounted() {
    for (let i in appData) {
      //读取json文件保存数据给数组
      this.faceList.push(appData[i].char);
    }
  },
  computed: mapState(["sessions", "currentSession"]),
  methods: {
    addMessageByClick() {
      let msgObj = new Object();
      msgObj.content = this.content;
      msgObj.messageTypeId = 1;
      //发送群聊消息
      if (this.currentSession.username == "群聊") {
        console.log(this.content);
        this.$store.state.stomp.send(
          "/ws/groupChat",
          {},
          JSON.stringify(msgObj)
        );
      }
      //给机器人发送消息
      if (this.currentSession.username == "机器人") {
        msgObj.fromNickname = this.$store.state.currentUser.nickname;
        msgObj.to = "机器人";
        this.$store.state.stomp.send(
          "/ws/robotChat",
          {},
          JSON.stringify(msgObj)
        );
        //保存该条记录到session
        this.$store.commit("addMessage", msgObj);
      }
      //发送私聊消息
      else {
        msgObj.from = this.$store.state.currentUser.username;
        msgObj.fromNickname = this.$store.state.currentUser.nickname;
        msgObj.to = this.currentSession.username;
        this.$store.state.stomp.send("/ws/chat", {}, JSON.stringify(msgObj));
        //提交私聊消息记录
        this.$store.commit("addMessage", msgObj);
      }
      //清空输入框
      this.content = "";
    },
    addMessage(e) {
      if (e.ctrlKey && e.keyCode === 13 && this.content.length) {
        this.addMessageByClick();
      }
    },
    /**
     *       图片上传的方法
     */
    //上传前
    beforeAvatarUpload(file) {
      //不给机器人发送图片
      if (this.currentSession.username == "机器人") {
        this.$message.error("瓦力拒绝接收你的图片！");
      }
      //判断图片大小
      let isLt1M = file.size / 1024 / 1024 < 1;
      console.log(file);
      if (!isLt1M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      //判断图片的格式
      let imgType = file.name.substring(file.name.lastIndexOf(".") + 1);
      imgType = imgType.toLowerCase();
      // let isImg =
      //   imgType === "jpg" ||
      //   imgType === "png" ||
      //   imgType === "jpeg" ||
      //   imgType === "gif";
      //  if (!isImg){
      //    this.$message.error('上传图片格式不符合要求！');
      //  }
      return isLt1M;
    },
    beforeFileUpload(file) {
      //不给机器人发送图片
      if (this.currentSession.username == "机器人") {
        this.$message.error("瓦力拒绝接收你的图片！");
        return false;
      }
      return true;
    },
    // 图片上传成功
    imgSuccess(response, file, fileList) {
      console.log("图片url为：" + response);
      let msgObj = new Object();
      msgObj.content = response;
      //设置消息类型为图片
      msgObj.messageTypeId = 2;
      if (this.currentSession.username == "群聊") {
        this.$store.state.stomp.send(
          "/ws/groupChat",
          {},
          JSON.stringify(msgObj)
        );
      } else {
        msgObj.from = this.$store.state.currentUser.username;
        msgObj.fromNickname = this.$store.state.currentUser.nickname;
        msgObj.to = this.currentSession.username;
        this.$store.state.stomp.send("/ws/chat", {}, JSON.stringify(msgObj));
        //提交私聊消息记录
        this.$store.commit("addMessage", msgObj);
      }
    },
    // 图片上传失败
    imgError(err, file, fileList) {
      this.$message.error("上传失败");
    },
    // 文件上传成功
    fileSuccess(response, file, fileList) {
      console.log("图片url为：" + response);
      let msgObj = new Object();
      msgObj.content = response;
      //设置消息类型为图片
      msgObj.messageTypeId = 3;
      if (this.currentSession.username == "群聊") {
        this.$store.state.stomp.send(
          "/ws/groupChat",
          {},
          JSON.stringify(msgObj)
        );
      } else {
        msgObj.from = this.$store.state.currentUser.username;
        msgObj.fromNickname = this.$store.state.currentUser.nickname;
        msgObj.to = this.currentSession.username;
        this.$store.state.stomp.send("/ws/chat", {}, JSON.stringify(msgObj));
        //提交私聊消息记录
        this.$store.commit("addMessage", msgObj);
      }
    },
    // 文件上传失败
    fileError(err, file, fileList) {
      this.$message.error("上传失败");
    },
    //获取Emoji
    getEmo(index) {
      var textArea = document.getElementById("textarea");
      //将选中的表情插入到输入文本的光标之后
      function changeSelectedText(obj, str) {
        if (window.getSelection) {
          // 非IE浏览器
          textArea.setRangeText(str);
          // 在未选中文本的情况下，重新设置光标位置
          textArea.selectionStart += str.length;
          textArea.focus();
        } else if (document.selection) {
          // IE浏览器
          obj.focus();
          var sel = document.selection.createRange();
          sel.text = str;
        }
      }
      changeSelectedText(textArea, this.faceList[index]);
      this.content = textArea.value; // 要同步data中的数据
      // console.log(this.faceList[index]);
      return;
    }
  }
};
</script>

<style lang="scss">
/* el-popover是和app同级的，所以scoped的局部属性设置无效 */
/* 需要设置全局style */
.el-popover {
  height: 200px;
  width: 450px;
  overflow: scroll;
  overflow-x: auto;
}
</style>

<style lang="scss" scoped>
#uesrtext {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 30%;
  border: solid 1px #ddd;
  background-color: white;
  > textarea {
    padding: 10px;
    width: 95%;
    height: 58%;
    border: none;
    outline: none;
    resize: none; //禁止拉伸
  }
  #sendBtn {
    float: right;
    margin-right: 10px;
  }
  #uploadImgBtn {
    border: none;
    padding-bottom: 0px;
    margin-bottom: 0px;
    padding-left: 12px;
  }
  #uploadImgBtn:hover {
    background-color: white;
  }
  #emojiBtn {
    border: none;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
  }
  #emojiBtn:hover {
    background-color: white;
  }
  .upload-btn {
    display: inline-block;
  }
}
.emotionList {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}
.emotionItem {
  width: 10%;
  font-size: 20px;
  text-align: center;
}
/*包含以下四种的链接*/
.emotionItem {
  text-decoration: none;
}
/*正常的未被访问过的链接*/
.emotionItem:link {
  text-decoration: none;
}
/*已经访问过的链接*/
.emotionItem:visited {
  text-decoration: none;
}
/*鼠标划过(停留)的链接*/
.emotionItem:hover {
  text-decoration: none;
}
/* 正在点击的链接*/
.emotionItem:active {
  text-decoration: none;
}
</style>
